<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>同咨科技-商户后台</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="../../static/css/weadmin.css">
	<link href="../../lib/layui/css/layui.css" rel="stylesheet">

	<script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
	<script type="module" src="../components/use-body.js"></script>

	<link href="../../static/css/account.css" rel="stylesheet">
	<link href="../../static/css/uselay.css" rel="stylesheet">
</head>

<body>
	<use-body>
		<div class="page-body">
			<!-- 左边菜单 -->
			<div class="side">
				<span class="layui-breadcrumb breadcrumb" lay-separator="/">
					<a><i title="首页" class="iconfont use-more"></i></a>
					<a><cite>账号设置</cite></a>
				</span>

				<div class="layui-panel">
					<ul class="layui-menu" id="demo-menu">
						<li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
							<div class="layui-menu-body-title">个人信息</div>
							<ul>
								<li>
									<div class="layui-menu-body-title">账户资料</div>
								</li>
								<li class="layui-menu-item-checked">
									<div class="layui-menu-body-title">安全设置</div>
								</li>
								<li>
									<div class="layui-menu-body-title">登录日志</div>
								</li>
							</ul>
						</li>
						<li class="layui-menu-item-divider"></li>
						<li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
							<div class="layui-menu-body-title">通知</div>
							<ul>
								<li>
									<div class="layui-menu-body-title">通知公告</div>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
			<!-- 主体 -->
			<div class="page-border">
				<div class="user-form accounts">
					<div class="layui-font-14">帐号设置</div>
					<form class="layui-form">
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">手机号</label>
								<div class="layui-input-inline layui-input-wrap">
									<input type="tel" value="18611176203" disabled class="layui-input">
								</div>
								<div class="layui-form-mid" style="padding: 0!important;">
									<button type="button" class="layui-btn" lay-on="get-edit">修改</button>
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">邮箱</label>
							<div class="layui-input-inline layui-input-wrap">
								<input type="text" value="未绑定" disabled class="layui-input">
							</div>
							<div class="layui-inline">
								<button type="button" class="layui-btn" lay-on="get-edit">修改</button>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">密码</label>
							<div class="layui-input-inline layui-input-wrap">
								<input type="password" name="password" value="18611176203" disabled class="layui-input">
							</div>
							<div class="layui-inline">
								<button type="button" class="layui-btn" lay-on="get-edit">修改</button>
							</div>
						</div>
						<div class="acc-text">已设置，可通过账户密码登录</div>
					</form>
				</div>
			</div>
		</div>
	</use-body>
	<!--弹框-->
	<div id="layui-container" style="display: none; width: 550px;">
		<div class="edit-dialog dialog">
			<form class="layui-form" action="">
				<div class="title">身份验证</div>
				<div class="text">为了你的账户安全，请验证身份。验证成功后进行下一步操作。</div>
				<div class="m-box">
					<div class="layui-form-item">
						<div class="layui-input-inline">
							<input type="tel" name="phone" maxlength="11" lay-verify="required|phone" autocomplete="off" lay-reqtext="请输入手机号" lay-affix="clear" placeholder="请输入手机号" class="layui-input demo-phone">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-inline">
							<input type="text" maxlength="6" name="vercode" lay-verify="required" autocomplete="off" placeholder="6位数字验证码" lay-affix="clear" class="layui-input">
						</div>
						<div class="layui-form-mid" style="padding: 0!important;">
							<button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
						</div>
					</div>
				</div>
			</form>
			<div class="dialog-footer">
				<div class="cent">
					<button type="button" class="layui-btn btn-text">取消</button>
					<button type="button" class="layui-btn layui-btn-radius">保存</button>
				</div>
			</div>
		</div>
	</div>
</body>

<script>
	layui.use(function () {
		var $ = layui.$;
		var layer = layui.layer;
		var form = layui.form
		var util = layui.util;
		// 批量事件
		util.on('lay-on', {
			'get-edit': function () {
				layer.open({
					type: 1,
					title: false,
					// btn: ['确定', '取消'],
					content: $('#layui-container'), // 捕获的元素
					success: function (layero) {
						//把内容放到遮罩层里
						var mask = $(".layui-layer-shade");
						mask.appendTo(layero.parent());
					}
				});
			}
		})

		util.on('lay-on', {
			// 获取验证码
			"get-vercode": function (obj) {
				var isvalid = form.validate('.demo-phone'); // 主动触发验证，v2.7.0 新增 
				// 验证通过
				if (isvalid) {
					// layer.msg('手机号规则验证通过')
					// 此处可继续书写「发送验证码」等后续逻辑
					countDown(obj)
				}
			}
		})

		// 倒计时
		function countDown(obj) {
			var time = 60
			//消抖，防止用户多次点击发送短信按钮造成读秒过快情况
			obj.attr("disabled", "true");
			let interval = setInterval(() => {
				if (time == 0) {
					clearInterval(interval)
					obj.text("获取验证码");
					obj.removeAttr("disabled")
				} else {
					obj.text(`重新发新${time--}秒`)
				}
			}, 1000)
		}

	});
</script>

</html>